<template>
  <div class="sidebar">
    <ul>
      <li
        v-for="(item, index) in sidList"
        @click="sidCut(index)"
        :class="{ active: index == checkeIndex }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props: {
    sidList: Array,
  },
  setup(props,{emit}) {
    const checkeIndex = ref(0);
    const sidCut = (i) => { // 点击切换的事件
      checkeIndex.value = i;
      emit('sidCut',i);
    };
    return {
      checkeIndex,
      sidCut,
    };
  },
};
</script>
<style lang="scss" scoped>
ul {
  width: 93px;
  height: 100%;
  border-right: 1px solid #ccc;
  overflow: auto;
  li {
    line-height: 36px;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    border-left: 2px solid transparent;
  }
  .active {
    border-color: red;
    color: red;
  }
}
</style>